<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换列表</title>

    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"/>

    <script type="text/javascript" src="../jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery/env.js"></script>

    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <style>
        .query-row {
            margin-top: 5px;
            width: 100%;
        }

        .query-item {
            width: 300px;
            height: 44px;
            display: inline-block;

        }

        .a-action {
            display: inline-block;
            margin: 0 5px 0 5px;
        }

        .win-footer {
            margin-bottom: 20px;
            padding-left: 180px;

        }

        .win-footer-btn {
            width: 64px;
            margin-left: 20px;

            display: inline-block;
        }
    </style>
</head>
<body class="easyui-layout">
<div data-options="region:'north'">
    <div class="query-row">
        <div class="query-item">
            <input name="describe" class="easyui-textbox"
                   data-options="width:290,label:'转换描述',labelAlign:'right',labelWidth:100">
        </div>
        <div class="query-item">
            <a id="queryBtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
        </div>
    </div>
</div>
<div data-options="region:'center',fit:true">
    <table id="dg"></table>
</div>

<!--<div id="param_window">-->
<!--    <table id="param_datagrid"></table>-->
<!--</div>-->
<div id="param_footer" class="win-footer">
    <div class="win-footer-btn"><a href="#" class="easyui-linkbutton" id="btnSave"
                                   data-options="iconCls:'icon-save'">确定</a></div>
    <div class="win-footer-btn"><a href="#" class="easyui-linkbutton" id="btnCancel"
                                   data-options="iconCls:'icon-cancel'">取消</a></div>
</div>
</body>
<script>
    $(function () {
        let paramWindow = $('<div id="param_window"></div>').appendTo('body').window({
            title: '转换参数',
            collapsible: false,
            minimizable: false,
            maximizable: false,
            draggable: false,
            resizable: false,
            width: 800,
            height: 450,
            closed: true,
            footer: '#param_footer',
            content: '<table id="param_datagrid"></table>',
            queryParams: {},
            onOpen: function () {
                let options = $.data(this, 'window').options;
                $('#param_datagrid').datagrid({
                    border: false,
                    height: 380,
                    queryParams: {convertId: options.queryParams.convertId},
                    editing: null,
                    toolbar: [
                        {
                            iconCls: 'icon-add', handler: function () {
                                let paramDatagrid = $('#param_datagrid');
                                let options = paramDatagrid.datagrid('options');
                                if (options.editing) {
                                    paramDatagrid.datagrid('endEdit', options.editing);
                                }
                                paramDatagrid.datagrid('appendRow', {});
                                let rows = paramDatagrid.datagrid('getRows');
                                paramDatagrid.datagrid('beginEdit', rows.length - 1);
                            }
                        },
                        '-',
                        {
                            iconCls: 'icon-remove', handler: function () {
                            }
                        },
                        '-',
                        {
                            iconCls: 'icon-edit', handler: function () {
                            }
                        },
                    ],
                    columns: [[
                        {field: '#', title: '#', checkbox: true},
                        {field: 'convertId', title: 'ID', hidden: true},
                        {
                            width: 120,
                            halign: 'center',
                            align: 'left',
                            field: 'paramName',
                            title: '参数名',
                            resizable: true,
                            editor: 'text'
                        },
                        {
                            width: 160,
                            halign: 'center',
                            align: 'left',
                            field: 'paramValue',
                            title: '参数值',
                            resizable: true,
                            editor: 'text'
                        },
                        {
                            width: 160,
                            halign: 'center',
                            align: 'left',
                            field: 'defaultValue',
                            title: '默认值',
                            resizable: true,
                            editor: 'text'
                        },
                        {
                            width: 200,
                            halign: 'center',
                            align: 'left',
                            field: 'describe',
                            title: '描述',
                            resizable: true,
                            editor: 'text'
                        },
                    ]],
                    loader: function (param, success, error) {
                        $.get($.rootUrl + '/zjk/convert/convertParam', param, function (res) {
                            if (res.success) {
                                let result = res.result;
                                success({total: result.length, rows: result});
                            } else {
                                error();
                            }
                        })
                    },
                    onBeforeLoad: function () {
                        let options = $.data(this, 'datagrid').options;
                        if (!options.queryParams.convertId) {
                            return false
                        }
                    },
                    onBeforeEdit: function (index, row) {
                        let options = $.data(this, 'datagrid').options;
                        if (options.editing != null && options.editing !== index) {
                            $(this).datagrid('endEdit', options.editing);
                        }
                    },
                    onBeginEdit: function (index, row) {
                        let options = $.data(this, 'datagrid').options;
                        $.extend(options, {editing: index});
                    },
                    onClickCell: function (index, field, value) {
                        $(this).datagrid('beginEdit', index);
                    }
                });
            }
        });
        $('#btnSave').linkbutton({
            iconCls: 'icon-save',
            onClick: function () {
                let paramDatagrid = $('#param_datagrid');
                let options = paramDatagrid.datagrid('options');
                if (options.editing != null) {
                    paramDatagrid.datagrid('endEdit', options.editing);
                }
                let rows = paramDatagrid.datagrid('getRows');

                let data = $.extend({},options.queryParams,{params:rows});
                console.log('submit',data)
                $('#param_window').window('close');
            }
        });
        $('#btnCancel').linkbutton({
            iconCls: 'icon-cancel',
            onClick: function () {
                $('#param_window').window('close');
            }
        });

    });

    (function ($) {
        function design(row) {
            // window.open('./convertdesign.html','_blank')
            window.open('./convertdesign.html?convertId=' + row.convertId + '&describe=' + row.describe)
        }

        //settings
        let dg = $('#dg').data({
            setting: {
                height: 460,
                idField: 'convertId',
                // fitColumns:true,
                rownumbers: true,
                method: 'get',
                url: '/zjk/convert/convertPage',
                pagination: true,
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 20, 50, 100],
                singleSelect: true,
                columns: [[
                    {field: '#', title: '#', checkbox: true},
                    {field: 'convertId', title: 'ID', hidden: true},
                    {width: 360, halign: 'center', align: 'left', field: 'describe', title: '描述', resizable: true},
                    {width: 60, halign: 'center', align: 'center', field: 'status', title: '状态', fixed: true},
                    {width: 120, halign: 'center', align: 'center', field: 'lastRunTime', title: '最后运行时间', fixed: true},
                    {
                        width: 120,
                        halign: 'center',
                        align: 'center',
                        field: 'lastSuccessTime',
                        title: '最后成功时间',
                        fixed: true
                    },
                    {
                        width: 120,
                        align: 'center',
                        field: 'action',
                        title: '操作',
                        formatter: function (value, row, index) {
                            let html = '<div class="a-action action-design"><a href="javascript:void(0)" index=' + index + '>设计</a></div>';
                            html += '<div class="a-action action-paramsetting"><a href="javascript:void(0)" index=' + index + '>参数维护</a></div>';
                            return html
                        }
                    },
                ]],
                loader: function (param, success, error) {
                    //参数
                    let queryParams = {pageNo: param.page, pageSize: param.rows};
                    $.each($('.query-item input').serializeArray(), function (i, item) {
                        queryParams[item.name] = item.value
                    });
                    //请求
                    $.get($.rootUrl + dg.data("setting").url, queryParams, function (res) {
                        if (res.success) {
                            let result = res.result;
                            success({total: result.total, rows: result.records});

                        } else {
                            error();
                        }
                    });
                },
                onLoadSuccess: function (res) {
                    //绑定事件及赋值参数
                    $('.action-design a').bind('click', function () {
                        let index = $(this).attr('index');
                        // $(this).data({index: index, row: res.rows[index]});
                        design(res.rows[index])
                    });
                    $('.action-paramsetting a').bind('click', function () {
                        let index = $(this).attr('index');
                        // $(this).data({index: index, row: res.rows[index]});
                        let row = res.rows[index];
                        $('#param_window').window({queryParams: row}).window('open');
                        // $('#param_datagrid').datagrid({queryParams:row})
                    });

                }

            },
            queryParams: {},
            methods: {}
        });
        //分页组件
        $.fn.pagination.defaults = $.extend({}, $.fn.pagination.defaults, {
            pageSize: dg.data('setting').pageSize || 10,
            pageNumber: 1,
            pageList: dg.data('setting').pageList || [10, 20, 50],
            //showPageList:false,
            showRefresh: false,
            //        showPageInfo:false,
            beforePageText: '第 ',
            afterPageText: '/{pages} 页',
            displayMsg: '从 {from} 到 {to} ,共 {total} 记录',
        });
        //渲染datagrip
        dg.datagrid(dg.data('setting'));

        //查询按钮
        $('#queryBtn').bind('click', function () {
            dg.datagrid('load')
        });


    })(jQuery);


</script>
</html>
